/**
 * 交互样式常量
 */
export const INTERACTIVE_STYLES = {
  // 基础交互样式
  BASE: {
    cursor: 'pointer',
    transition: 'all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1)',
    userSelect: 'none' as const,
  },

  // 紫色主题
  PURPLE: {
    borderColor: 'rgba(103, 58, 183, 0.8)',
    boxShadow: '0 8px 14px rgba(103, 58, 183, 0.3)',
    hover: {
      borderColor: 'rgba(103, 58, 183, 1)',
      boxShadow: '0 10px 16px rgba(103, 58, 183, 0.4)',
    },
    active: {
      transform: 'scale(0.98)',
      boxShadow: '0 4px 8px rgba(103, 58, 183, 0.3)',
    },
  },

  // 蓝色主题
  BLUE: {
    borderColor: 'rgba(33, 150, 243, 0.8)',
    boxShadow: '0 8px 14px rgba(33, 150, 243, 0.3)',
    hover: {
      borderColor: 'rgba(33, 150, 243, 1)',
      boxShadow: '0 10px 16px rgba(33, 150, 243, 0.4)',
    },
  },

  // 红色主题
  RED: {
    borderColor: 'rgba(244, 67, 54, 0.8)',
    boxShadow: '0 8px 14px rgba(244, 67, 54, 0.3)',
    hover: {
      borderColor: 'rgba(244, 67, 54, 1)',
      boxShadow: '0 10px 16px rgba(244, 67, 54, 0.4)',
    },
  },

  // 禁用状态
  DISABLED: {
    opacity: 0.6,
    cursor: 'not-allowed',
    filter: 'grayscale(30%)',
  },
} as const

/**
 * 获取组合样式
 * @param options 配置选项
 * @param options.theme 主题颜色
 * @param options.disabled 是否禁用
 * @param options.withTransition 是否启用过渡效果
 */
export function getInteractiveStyles(options: {
  theme?: 'PURPLE' | 'BLUE' | 'RED'
  disabled?: boolean
  withTransition?: boolean
}): any {
  const { theme = 'PURPLE', disabled = false, withTransition = true } = options

  return {
    ...INTERACTIVE_STYLES.BASE,
    ...(withTransition
      ? {
          transition: INTERACTIVE_STYLES.BASE.transition,
        }
      : {}),
    ...INTERACTIVE_STYLES[theme],
    ...(disabled ? INTERACTIVE_STYLES.DISABLED : {}),
  }
}
